<template>
  <div>
    <h1>动态css样式绑定：</h1>
    <h2>示例一、通过对象绑定</h2>
    <div v-bind:class="{hide: isHide}">Hello !</div>

    <h2>示例二、与普通class属性共存</h2>
    <div v-bind:class="{hide: isHide}" class="defaultClass">Hello !</div>

    <h2>示例三、通过数组绑定</h2>
    <div v-bind:class="[classA, classB]">Hello !</div>

    <h2>示例四、用三元表达式</h2>
    <div v-bind:class="[isShow ? classA : '', classB]">Hello !</div>

    <h2>示例五、内联样式-通过对象</h2>
    <div v-bind:style="styleObject">Hello !</div>

    <h2>示例六、内联样式-通过数组</h2>
    <div v-bind:style="[stylesA, stylesB]">Hello </div>
  </div>

</template>

<script>
export default {
  name: 'dynamicCSS',
  data () {
    return {
      msg: '动态css样式绑定',

      isHide: true,

      classA: 'hide',
      classB: 'defaultClass',

      isShow: true,

      styleObject: {
        "background-color": 'red',
        width: '300px'
      },

      stylesA: {
        "background-color": 'red',
        width: '300px'
      },
      stylesB: {
        color: '#fff',
        height: '300px'
      }
    }
  },
  methods: {

    setClass () {
      this.styleObject.width = '1000px'

    }

  },
  mounted: {
  }
}
</script>
<style scoped>
.hide {
  color: blue;
}

.defaultClass {
  font-size: 50px;
}
</style>
